<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/page-bg1.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' leftIconColor="#fff" bgColor="transparent" @leftClick="navBack" title="危机评估">
				<view slot="center" class="navTitle" style="color: #fff;">
					<text v-if="info&&info.userName">{{info.userName}}-</text> 危机评估
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="wbox" v-if="info">
						<view class="bg">
							<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/boxbg3-1.png" mode="widthFix"></image>
						</view>
						<view class="tit border">
							个人信息
						</view>
						<view class="lines">
							<view class="line">
								<view class="ll">姓名</view>
								<view class="lr">{{info.userName}}</view>
							</view>
							<view class="line">
								<view class="ll">性别</view>
								<view class="lr">{{info.sex}}</view>
							</view>
							<view class="line">
								<view class="ll">年级</view>
								<view class="lr">{{info.gradeName}}</view>
							</view>
							<view class="line">
								<view class="ll">班级</view>
								<view class="lr">{{info.classesName}}</view>
							</view>
							<view class="line">
								<view class="ll">填表教师</view>
								<view class="lr">{{personInfo.name || ''}}</view>
							</view>
							<view class="line">
								<view class="ll">时间</view>
								<view class="lr">{{info.createTimeFormat}}</view>
							</view>
						</view>
					</view>
					<view class="wbox" v-if="warnResult&&warnResult.length>0">
						<view class="tit">
							测评量表结果
						</view>
						<view class="table">
							<view class="tbody">
								<view class="tr th">
									<view class="td td-2">
										量表
									</view>
									<view class="td td1">
										测评结果
									</view>
									<view class="td td-2">
										时间
									</view>
								</view>
								<view class="tr" v-for="(td,index) in warnResult" :key="index">
									<view class="td td-2">
										{{td.questionName}}
									</view>
									<view class="td td1" :style="'color:'+stageOption(td.stage).color">
										{{td.dimensionLevel}}
									</view>
									<view class="td td-2">
										{{td.operateTime}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="wbox" v-if="testResult&&testOptions.length>0">
						<view class="tit">
							危机评估
						</view>
						<view class="pinguTest">
							<view class="pitem" v-for="(i,index) in testOptions" :key="index">
								<view class="ptit" slot="title">
									<view class="tl">
										<text>{{i.name}}</text>
									</view>
									<view class="tr">
										<view class="ico">
											<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
										</view>
									</view>
								</view>
								<view class="ul">
									<view class="li" v-for="(j,jindex) in i.topicList" :key="jindex">
										<view class="lt" v-if="j.name">
											<text>题目{{chineseNumber[jindex]}}、</text>
											<text>{{j.name}}</text>
										</view>
										<view class="ops" :class="j.isGrid?'grid':''">
											<template v-if="j.type==1">
												<view class="op" :class="j.value==op.value?'selected':''"
													v-for="(op,oindex) in j.optContent"
													@click="toSelect1(index,jindex,op)">

													<text>{{enLetters[oindex]}}.</text>
													<text>{{op.name}}</text>
												</view>
											</template>
											<template v-if="j.type==2">
												<view class="op" :class="op.select?'selected':''"
													v-for="(op,oindex) in j.optContent"
													@click="toSelect2(index,jindex,oindex)">

													<text>{{op.name}}</text>
												</view>
											</template>
											<!-- <view class="op" 
											v-if="j.otherOption"
											:class="testResult[index][jindex].isOtherSelect?'selected':''"
											@tap="testResult[index][jindex].isOtherSelect=!testResult[index][jindex].isOtherSelect"
											>
									`
											</view> -->
										</view>
										<!-- <view class="otherInput" v-if="j.otherOption&&testResult[index][jindex].isOtherSelect">
											<input type="text" :placeholder="'选择'+j.otherOption+'则需要填写描述'" v-model="testResult[index][jindex].otherContent" />
										</view> -->
									</view>
								</view>
							</view>
						</view>
						<view class="btns">
							<view class="btn" @tap="submit">
								评估完成
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemid: '',
				edit: false,
				info: {},
				personInfo:{},
				testOptions: [],
				warnResult: [],
				testResult: []
			}
		},
		methods: {
			toSelect1(index, jindex, item) {
				console.log(this.testOptions[index].topicList[jindex], 121)
				this.testOptions[index].topicList[jindex].value = item.value
			},
			toSelect2(index, jindex, oindex) {
				this.testOptions[index].topicList[jindex].optContent[oindex].select = !this.testOptions[index].topicList[
					jindex].optContent[oindex].select
			},

			submit() {


				let data = {
					id: this.info.id,
					fileUrl:'https://www.showdoc.com.cn/2598832913342721/11558489944943331',
					remark:'测试',
					answer: []
				}
				this.testOptions.some(topic => {
					topic.topicList.some(item => {

						let i = {
							"id": item.id,
							"value": item.value,
							"remark": ""
						}
						if (item.type == 2) {

							item.value = []
							item.optContent.some(topic => {
								if (topic.select) {
									item.value.push(topic.value)
								}
							})
							i.value = String(item.value)
						}
						data.answer.push(i)
					})
				})
				this.$api.riskrecordEvaluate(data, res => {
					if (res.code == 200) {
						this.$common.successToShow('提交成功', () => {

							uni.redirectTo({
								url: '/subpage/teacher/warningList/detail?id=' + this.itemid
							})
						})
					} else {

						this.$common.errorToShow(res.message)
					}
				})
			},
			setResult(obj, pindex, testIndex, optionIndex) {
				var that = this;
				if (obj.type == 0) {
					that.testResult[pindex][testIndex].selected = [optionIndex];
				} else {
					var index = that.testResult[pindex][testIndex].selected.indexOf(optionIndex);
					if (index == -1) {
						that.testResult[pindex][testIndex].selected.push(optionIndex)
					} else {
						that.testResult[pindex][testIndex].selected.splice(index, 1)
					}
				};
			},
			getInfo() {
				this.$api.riskrecordDetail({
					id: this.itemid
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						this.testOptions = JSON.parse(res.data.questionDataList)
						this.warnResult = JSON.parse(res.data.warnResult)

						this.testOptions.some(topic => {
							topic.topicList.some(item => {

								item.optContent = JSON.parse(item.optContent)
								this.$set(item, 'value', '')
								if (item.type == 2) {
									item.optContent.some(item1 => {
										this.$set(item1, 'select', false)
									})
								}
							})
						})
						console.log(this.testOptions, 1212)

					}
				})
				
				
				if (this.$db.get("userToken")) {
					this.$api.memberInfo({}, res => {
						if (res.code == 200) {
							this.personInfo = res.data;
						}
					})
				
				}
			},
		},
		onLoad(e) {
			this.itemid = e.id
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.wbox {
		padding: 40rpx;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 30rpx;
		position: relative;
		z-index: 10;

		.bg {
			position: absolute;
			z-index: -1;
			right: 0;
			bottom: 0;
			width: 290rpx;

			image {
				display: block;
				width: 100%;
				height: auto;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}

		.btns {
			margin-top: 80rpx;
			margin-bottom: 20rpx;

			.btn {
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				background: #fe9c29;
				line-height: 90rpx;
				border-radius: 90rpx;
			}
		}

		.tit {
			font-size: 32rpx;
			padding-bottom: 30rpx;
			color: #4d5765;

			&.border {
				border-bottom: 1rpx solid #f4f6f8;
			}
		}

		.lines {
			padding: 20rpx 0 0;

			.line {
				display: flex;
				padding: 10rpx 0;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;

				.ll {
					flex: 0 0 auto;
					color: #7c838d;
				}

				.lr {
					flex: 1 1 auto;
					padding-left: 30rpx;
					text-align: right;
					overflow: hidden;
					color: #4d5765;
				}
			}
		}

		.table {
			.td1 {
				padding: 20rpx 10rpx;
				width: 20%;
			}

			.td-2 {
				width: 40%;
				padding: 20rpx 10rpx;
			}
		}

		.pinguTest {
			.pitem {
				padding: 30rpx 20rpx;
				background: #e5f1ff;
				margin-bottom: 30rpx;
				border-radius: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.li {
					padding: 36rpx 30rpx;
					background: #fff;
					margin-bottom: 10rpx;
					border-radius: 30rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.lt {
						padding-bottom: 30rpx;
						font-size: 28rpx;
						color: #4d5765;
						line-height: 1.2;
					}

					.ops {
						.op {
							max-width: 100%;
							box-sizing: border-box;
							padding: 20rpx 30rpx;
							background: #f4f6f9;
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #4d5765;
							margin-bottom: 8rpx;

							&:last-child {
								margin-bottom: 0;
							}

							&.selected {
								background: #ffefdd;
								color: #fe9c29;
							}
						}

						&.grid {
							display: flex;
							flex-wrap: wrap;
							margin-right: -8rpx;

							.op {
								flex: 1 0 auto;
								padding: 20rpx;
								text-align: center;
								margin-right: 8rpx;
							}
						}
					}

					.otherInput {
						margin-top: 30rpx;

						input {
							width: 100%;
							box-sizing: border-box;
							padding: 0 30rpx;
							height: 90rpx;
							line-height: 90rpx;
							font-size: 24rpx;
							color: #4d5765;
							border: none;
							outline: none;
							background: #f4f6f9;
							border-radius: 90rpx;
						}
					}
				}

				.ptit {
					display: flex;
					align-items: center;
					line-height: 1;
					font-size: 28rpx;
					color: #4d5765;
					padding: 0 30rpx 30rpx;

					.tl {
						flex: 1 1 auto;
						overflow: hidden;
						padding-right: 30rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
					}

					.tr {
						flex: 0 0 auto;

						.ico {
							transform: rotate(90deg);

							image {
								display: block;
								width: 12rpx;
								height: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>